<template>
    <div class="mian">
        <div class="top">
            <div class="logo">
                <h3>法律AI咨询问答平台</h3>
            </div>
            <span class="welcome">欢迎您：法律AI咨询问答管理平台</span>
            <div class="right_bar">
                <el-dropdown class="userName">
                    <span class="el-dropdown-link">
                        admin<i class="el-icon-caret-bottom el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item >
                            <div @click="logoutClick()">
                                <i class="el-icon-switch-button"></i>退出
                            </div>
                            
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="content">
            <div class="left">
                <el-row class="tac">
                    <el-col>
                        <el-menu
                        :default-openeds="openeds"
                        :default-active="defaultActive"
                        class="el-menu-vertical-demo"
                        background-color="#20344a"
                        text-color="#ccc"
                        @open="handleOpen"
                        @close="handleClose">
                            <el-menu-item-group>
                                <el-menu-item :index="item.routerName" v-for="(item,index) in pcRouteList" :key="index" @click="goto(item,index)">{{ item.name }}</el-menu-item>
                            </el-menu-item-group>
                        </el-menu>
                    </el-col>
                </el-row>
            </div>
            <div class="right">
                <router-view/>
            </div>
        </div>
    </div>
</template>
<script>
export default {
data () {
    return {
        defaultActive:"1-1",
        openeds:["1","2"],
        pcRouteList:[
            {
                name:"会员管理",
                routerName:"member"
            },
            {
                name:"问题管理",
                routerName:"problem"
            },
        ],
    }
},
mounted () {
    this.initLoad()
},
methods: {
    initLoad () {
        this.defaultActive = this.$route.name
        console.log(this.defaultActive)
    },
    handleOpen(key, keyPath) {
        console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
        console.log(key, keyPath);
    },
    goto (item,index) {
        this.$router.push({
            name:item.routerName
        })
    },
    logoutClick() {
        this.$message({
            message: '退出成功',
            type: 'success'
        });
        this.$router.push({
            name:"login"
        })
    }
}
}
</script>
<style scoped>
.mian {
    width: 100%;
    height: 100%;
    font-size: 12px;
}
.top {
    width: 100%;
    height: 50px;
    background-color: #20344a;
}
.top .logo {
    width: 160px;
    height: 50px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 50px;
    color: #fff;
    float: left;
    cursor: pointer;
}
.top .logo img {
    width: 68px;
    height: 34px;
    vertical-align: middle;
}
.top .welcome {
    height: 50px;
    line-height: 50px;
    display: block;
    float: left;
    color: #ccc;
    padding-left: 20px;
}
.top .right_bar {
    float: right;
    margin-right: 10px;
    height: 100%;
}
.top .right_bar img {
    margin-top: 5px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    float: left;
    margin-right: 10px;
}
.top .right_bar .userName {
    height: 100%;
    float: right;
    color: #ccc;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.content {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
}
.content .left {
    width: 160px;
    height: 100%;
    background-color: #20344a;
}
.content .right {
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
}
.content .left>>>.el-menu {
    border: none !important;
}
.content .left>>>.el-submenu .el-menu-item,.content .left>>>.el-menu {
    min-width: 160px;
}
</style>